<template>
  <div>
    <el-dialog
      :visible="true"
      :title="title"
      class="add_case_dialog"
      width="40%"
      :before-close="callOf"
    >
      <el-form
        ref="form"
        :model="sizeForms"
        :rules="formrules"
        label-width="100px"
      >
        <el-form-item label="用例名称" prop="case_name">
          <el-input
            ref="case_name"
            v-model="sizeForms.case_name"
            class="add"
            placeholder="请输入用例名称"
          />
        </el-form-item>
        <el-form-item label="业务线" prop="group_name">
          <el-select
            v-model="sizeForms.group_name"
            class="add"
            placeholder="请选择"
            @change="selectOne(sizeForms.group_name)"
          >
            <el-option
              v-for="item in sizeForms.gns"
              :key="item.group_name"
              :label="item.group_name"
              :value="item.group_name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="项目" prop="project_name">
          <el-select
            v-model="sizeForms.project_name"
            class="add"
            placeholder="请选择"
          >
            <el-option
              v-for="item in projectOptions"
              :key="item.project_name"
              :label="item.project_name"
              :value="item.project_name"
            />
          </el-select>
        </el-form-item>
        <div />
        <el-form-item label="类型" prop="case_type">
          <el-select
            v-model="sizeForms.case_type"
            class="add"
            placeholder="请选择"
          >
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="yapi/git" prop="case_value">
          <el-input
            ref="case_value"
            v-model="sizeForms.case_value"
            class="add"
            placeholder="请输入yapi/git地址"
          />
        </el-form-item>
        <el-form-item v-if="false" label="是否部署" prop="is_deploy">
          <el-input
            ref="is_deploy"
            v-model="sizeForms.is_deploy"
            class="add"
            placeholder="请输入yapi/git地址"
          />
        </el-form-item>
        <div />
        <el-form-item>
          <el-button
            type="primary"
            @click="dialogFormAdd('form')"
          >保存</el-button>
          <el-button type="primary" @click="callOf('form')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { Message } from 'element-ui'
import { getGroupName, getProjectName } from '@/api/report'
import { addCaseLibrary, updataCaseLibrary } from '@/api/case'

export default {
  name: 'Task',
  props: {
    // dialogAdd: Object,
    sizeForms: {
      type: Object,
      required: true
    },
    edit: Boolean,
    title: {
      type: String,
      required: true
    }
  },

  data() {
    return {
      projectOptions: [],
      typeOptions: [
        { value: 1, label: 'WEB_UI自动化' },
        { value: 2, label: 'APP_UI自动化' },
        { value: 3, label: '接口自动化' }
      ],
      formrules: {
        case_name: [
          { required: true, message: '用例名称不能为空', trigger: 'blur' }
        ],
        group_name: [
          { required: true, message: '业务线不能为空', trigger: 'blur' }
        ],
        project_name: [
          { required: true, message: '项目不能为空', trigger: 'blur' }
        ],
        case_type: [
          { required: true, message: '类型不能为空', trigger: 'blur' }
        ],
        case_value: [
          { required: true, message: 'yapi/git地址不能为空', trigger: 'blur' }
        ]
      },
      pattern: new RegExp(
        "[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]"
      )
    }
  },
  mounted() {
    this.getGroupName()
  },
  methods: {
    dialogFormAdd(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          if (this.pattern.test(this.sizeForms.case_name)) {
            Message.error('用例名称不允许含有特殊字符!')
            return
          }
          if (this.edit) {
            updataCaseLibrary({
              id: this.sizeForms.id,
              case_name: this.sizeForms.case_name,
              group_name: this.sizeForms.group_name,
              project_name: this.sizeForms.project_name,
              case_type: this.sizeForms.case_type,
              case_value: this.sizeForms.case_value,
              is_deploy: this.sizeForms.is_deploy
            })
              .then((res) => {
                Message.success(res.message)
                this.callOf()
                this.$parent.getList()
              })
              .catch((err) => {
                Message.error(err.msg || err.message || err.value)
              })
          } else {
            addCaseLibrary({
              case_name: this.sizeForms.case_name,
              group_name: this.sizeForms.group_name,
              project_name: this.sizeForms.project_name,
              case_type: this.sizeForms.case_type,
              case_value: this.sizeForms.case_value
            }).then((res) => {
              if (res.code === 20000) {
                Message.success(res.message)
              } else {
                Message.error(res.message)
              }
              this.callOf()
              this.$parent.getList()
            })
          }
        } else {
          return false
        }
      })
    },
    getProjectName(groudId) {
      var group_id = ''
      for (const i in this.sizeForms.gns) {
        if (this.sizeForms.gns[i].group_name === groudId) {
          group_id = this.sizeForms.gns[i].group_id
          break
        }
      }

      getProjectName(group_id)
        .then((res) => {
          this.projectOptions = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    getGroupName() {
      getGroupName()
        .then((res) => {
          this._data.options = res.data
        })
        .catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
    },
    selectOne(groudId) {
      this.projectOptions = ''
      this.sizeForms.project_name = ''
      if (!groudId) {
        this.getGroupName()
        return
      }
      this.getProjectName(groudId)
    },
    callOf() {
      this.$emit('closePop')
    }
  }
}
</script>
<style>
.add {
  width: 100%;
}
</style>
